<template>
    <div class="admin_all">
        <admin_top></admin_top>
        <div v-if="!isguanli">
            <div class="t_btn_box">
                <div>
                    <el-input style="width:180px" size="small" v-model="searchname" placeholder="接口渠道名称"></el-input>
                    <el-button @click="getqdlist()" size="small" type="danger">搜索</el-button>
                </div>

            </div>
            <div class="t_table_box">
                <el-table :data="tableData">
                    <el-table-column prop="c_name" label="接口渠道名称">
                    </el-table-column>
                    <el-table-column prop="type_name" label="接口分类">
                    </el-table-column>
                    <el-table-column prop="query_order_type_name" label="订单信息查询">
                    </el-table-column>
                    <el-table-column prop="created_at" label="对接完成时间">
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注信息">
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注">
                      <template slot-scope="scope">
                          {{scope.row.problem_remarks}}
                          <el-button @click="kai(scope.row)" type="text" style="margin-left: 20px;">编辑</el-button>
                      </template>
                    </el-table-column>
                    <el-table-column label="接口文档">
                        <template slot-scope="scope">

                            <el-button @click="createwindow(scope.row.problem)" type="text" size="small">查看</el-button>

                            <el-button @click="jiekoukai(scope.row)" type="text" size="small">编辑</el-button>

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="300px">
                        <template slot-scope="scope">
                            <router-link :to="{path:'adminydjqd',query:{type:scope.row.id,name:scope.row.c_name}}">
                                <el-button @click="gldpshow(scope.row.id,scope.row.c_name)" type="text" >管理店铺</el-button>
                            </router-link>
                            <el-button @click="tidan(scope.row)" type="text" style="margin-left: 10px;">提单频率</el-button>
                            <el-button @click="go('/adminydjqd/adminkuaidi?id='+scope.row.id+'&name='+scope.row.c_name)" type="text">快递配置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 店铺管理 -->
        <dpgl @back="back" :shopname="shopname" :shopid="shopid" v-else />
        <!-- 创建支付订单 -->
        <el-dialog title="创建支付订单" :visible.sync="createzf" width="300px">
            <a target="_blank" :href="nowproblem">{{nowproblem}}</a>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" plain @click="createzf = false">取 消</el-button> -->
                <el-button size="small" type="danger" @click="createzf = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提单频率设置" :visible.sync="tidanlog" width="300px">
            <el-input v-model="all.order_frequency" type="number" placeholder="请输入提单频率">
              <el-button slot="append">秒</el-button>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" plain @click="createzf = false">取 消</el-button> -->
                <el-button size="small" type="danger" @click="tidango">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑备注" :visible.sync="beizhulog" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-input v-model="beizhuall.problem_remarks" type="textarea" :rows="5" placeholder="请输入备注"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="danger" @click="beizhugo">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑接口" :visible.sync="jiekoulog" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">

            <chuantupdf :imgs="jiekouall.interface_file" @getimg="getimg" v-if="relo"></chuantupdf>

            <el-input v-model="jiekouall.interface_url" type="textarea" :rows="5" placeholder="请输入链接" style="margin-top: 20px;"></el-input>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="danger" @click="jiekougo">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import admin_top from './top.vue';
import axios from "axios";
import E from 'wangeditor'
import dpgl from "./admindpgl"

import chuantupdf from '@/views/yongjin/yongjintixian/zujian/chuantupdf.vue'

export default {
    components: {
        admin_top,
        dpgl,
        chuantupdf,
    },
    data() {
        return {
          beizhuall:{
            id:'',
            problem_remarks:''
          },
          beizhulog:false,

          jiekouall:{
            id:"",
            interface_file:"",
            interface_url:""
          },
          jiekoulog:false,
          relo:false,

            tableData: [],
            //创建订单页面是否显示
            createzf: false,
            //富文本
            zheditor: null,
            //是否显示管理
            isguanli:false,
            //当前接口文档
            nowproblem:'',
            //搜索名称
            searchname:'',
            //当前店铺id
            shopid:'',
            //当前店铺名称
            shopname:"",
            all:{
order_frequency:"",
id:""
            },
            tidanlog:false
        };
    },
    mounted() {
        console.log(this.$route.query.type)
        if(this.$route.query.type==undefined){
            this.isguanli=false
        }else{
            this.isguanli=true
        }
        //获取已对接渠道
        this.getqdlist()

        // 禁用浏览器返回键

    　　history.pushState(null, null, document.URL);

    　　window.addEventListener('popstate', this.disableBrowserBack);

    },
    destroyed() {

    　　// 清除popstate事件 否则会影响到其他页面

    　　window.removeEventListener("popstate", this.disableBrowserBack, false);

    },
    methods: {


      kai:function(item){
        this.beizhuall = {
          id:item.id,
          problem_remarks:item.problem_remarks
        }
        this.beizhulog = true
      },
      beizhugo:function(){
        axios.post('/api/plan-market/admin/upstream/channel/problem_remarks/edit',this.beizhuall)
         .then((response) => {
           this.$message.success('操作成功');
           this.beizhulog = false
           this.getqdlist()
         })
      },


      jiekoukai:function(item){
        this.relo = false

        axios.get('/api/plan-market/admin/upstream/channel/interface_file?id='+item.id)
         .then((response) => {
           this.jiekouall = {
             id:item.id,
             interface_file:response.data.data.interface_file,
             interface_url:response.data.data.interface_url
           }
           this.jiekoulog = true
           this.relo = true
         })
      },

      getimg:function(img){
        this.jiekouall.interface_file = img
        if(img){
          this.$message.success('上传成功');
        }
      },

      jiekougo:function(){
        axios.post('/api/plan-market/admin/upstream/channel/interface_file/update',this.jiekouall)
         .then((response) => {
           this.$message.success('操作成功');
           this.jiekoulog = false
           this.getqdlist()
         })
      },


      go:function(url){
        this.$router.push(url)
      },
      tidan:function(item){
        this.all = {
          id:item.id,
          order_frequency:item.order_frequency
        }
        this.tidanlog = true
      },
      tidango:function(){
        if(this.all.order_frequency <= 0){
          this.$message.error('频率必须大于0秒');
          return
        }
        axios.post('/api/plan-market/admin/upstream/channel/update',this.all)
         .then((response) => {
           this.$message.success('设置成功');
           this.getqdlist()
         })
      },
        disableBrowserBack() {

    　　　　history.pushState(null, null, document.URL);

    　　},
        //获取已对接渠道
        getqdlist(){
             axios.get('/api/plan-market/admin/upstream/channel/list',{
                 params:{
                     name:this.searchname
                 }
             })
              .then((response) => {
                console.log(response.data.data)
                this.tableData=response.data.data
              })
        },
        //管理店铺
        gldpshow(id,name){
            this.isguanli=true
            this.shopid = id
            this.shopname = name
        },
        //创建文本框
        createfwb() {
            var that = this

            // this.zheditor = new E('#div2')

            // 配置 server 接口地址
            // this.zheditor.config.uploadImgServer = upload()
            // this.zheditor.config.uploadImgParams = {
            //     type: 'zhzn'
            // }
            // this.zheditor.config.customUploadImg = function (resultFiles, insertImgFn) {
            //     var formData = new FormData()
            //     formData.append('file', resultFiles[0])
            //     formData.append('type', 'zhzn')
            //     // upload(formData)
            //     that.axios({
            //         method: 'post',
            //         url: Vue.prototype.url + '/system/upload',
            //         data: formData
            //     }).then((response) => {
            //         console.log(response.data.data)
            //         insertImgFn(response.data.data)
            //     })
            //     // resultFiles 是 input 中选中的文件列表
            //     // insertImgFn 是获取图片 url 后，插入到编辑器的方法

            //     // 上传图片，返回结果，将图片插入到编辑器中
            //     // insertImgFn(imgUrl)
            // }
            // this.zheditor.config.onchange = function (newHtml) {

            //     that.createform.guiding = newHtml
            // };
            // this.zheditor.create()
        },
        //打开弹窗
        createwindow(plink) {
            this.createzf = true
            this.nowproblem = plink

            // var that = this
            // if (that.zheditor == null) {
            //     setTimeout(function () {
            //         //创建文本框
            //         that.createfwb()
            //     }, 100)
            // }
        },
        //监听子组件事件
        back(){
            this.isguanli=false
            console.log('-=-=-=-')
        }
    },
}
</script>
<style scoped>
.t_btn_box {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.t_table_box {
    padding: 20px;
}
</style>
<style lang="scss" scoped>
.admin_all {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;

    .logo {
        height: 30px;
    }

    .el-input {
        // width: 180px;
        // margin-right: 10px;
    }

    .flex {
        display: flex;
    }



    .zu {
        margin-top: 20px;

        .tit {
            background: #ccc;
            line-height: 45px;
            padding-left: 20px;
        }

        .con {
            background: #FFFFFF;
            padding: 20px;
            line-height: 30px;
            font-size: 14px;
        }

        .lli {
            margin-right: 30px;
            color: #666;
        }
    }
}
</style>
